<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>客户表</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="80">
                    <form-item label="客户姓名 :">
                        <i-input type="text" v-model="kehuVo.name"style="width: 100px"/>
                    </form-item>
                    <form-item label="客户电话 :">
                        <i-input type="text" v-model="kehuVo.phone"style="width: 100px"/>
                    </form-item>
                    <form-item label="地址 :">
                        <i-input type="text" v-model="kehuVo.address"/>
                    </form-item>
                    <form-item label="email :">
                        <i-input type="email" v-model="kehuVo.email"/>
                    </form-item>
                    <form-item>
                        <i-button type="primary"icon="ios-search" style="margin-left: -70px" @click="pageNo=1;search();">搜索</i-button>
                        <i-button type="success"icon="md-sync" @click="kehuVo={};search();pageNo=1"></i-button>
                    </form-item>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <shiro:hasPermission name="kehu:add">
            <i-button type="success" @click="toAdd"icon="md-add">添加客户</i-button>
        </shiro:hasPermission>
    </card>
    <i-table :columns="myColumns" :data="pageResult.rows"  :height="300" border stripe @on-selection-change="tableSelection=arguments[0]">
        <template slot-scope="{row,index}" slot="action" >
            <shiro:hasPermission name="kehu:update">
                <i-button type="warning" @click="toUpdate(row)" style="margin-left: 30px">修 改</i-button>
            </shiro:hasPermission>

            <shiro:hasPermission name="kehu:del">
                <i-button type="error"  @click="del(row,index)">删 除</i-button>
            </shiro:hasPermission>
        </template>
    </i-table>
    <modal v-model="addFlag" title="添加客户">
        <i-form  ref="kehu" :model="kehu" :lable-width="100" :rules="ruleValidate"  >
            <form-item label="姓名" prop="kehuName">
                <i-input v-model="kehu.kehuName" size="large"/>
            </form-item>
            <form-item label="电话号码"prop="kehuPhone">
                <i-input v-model="kehu.kehuPhone" size="large"/>
            </form-item>
            <form-item label="地址"prop="kehuAddress">
                <i-input v-model="kehu.kehuAddress"  size="large"/>
            </form-item>
            <form-item label="邮箱"prop="kehuEmail">
                <i-input type="email" v-model="kehu.kehuEmail"  size="large"/>
            </form-item>
            <i-button  type="primary" @click="add('kehu')" style="margin-left: 350px">提交</i-button>
            <i-button  type="error" @click="cancleSubmit('kehu')" >取消</i-button>
        </i-form>
        <div slot="footer">
        </div>
    </modal>
    <modal v-model="updateFlag" title="修改客户"@on-ok="update">
        <i-form ref="kehu1" :model="kehu" :lable-width="100">
            <form-item label="姓名"prop="kehuName">
                <i-input v-model="kehu.kehuName" size="large"/>
            </form-item>
            <form-item label="电话号码"prop="kehuPhone">
                <i-input v-model="kehu.kehuPhone" size="large"/>
            </form-item>
            <form-item label="地址"prop="kehuAddress">
                <i-input v-model="kehu.kehuAddress"  size="large"/>
            </form-item>
            <form-item label="邮箱"prop="kehuEmail">
                <i-input type="email" v-model="kehu.kehuEmail"  size="large"/>
            </form-item>
        </i-form>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"
    <%-- :current.sync="pageNo"-->
         <%--  @on-change="search"-->
   <%--@on-change="pageNo=arguments[0];search();"--%>

      @on-change="pageNo=arguments[0];search();"

      show-sizer
      :page-size-opts="[5,10,15]"
<%--	@on-page-size-change切换每页条数时的回调，返回切换后的每页条数--%>
          @on-page-size-change="pageSize=arguments[0];search();"
    />


</div>
<script>
    new Vue({
        el:"#root",
        data:{
            myColumns:[
                {title:"客户姓名",key:"kehuName",align:"center"},
                {title:"客户电话",key:"kehuPhone",align:"center"},
                {title:"客户地址",key:"kehuAddress",align:"center"},
                {title:"邮箱",key:"kehuEmail",align:"center"},
                {title:"操作",slot:"action",width: 300,align:"center"}
            ],
            pageResult:{
                rows:[],
                total:50
            },
            myData:[],
            tableSelection:[],
            kehu:{},
            updateFlag:false,
            addFlag:false,
            kehuVo:{},
            pageNo:1,
            pageSize:5,
            ruleValidate: {
                kehuName: [
                    {required: true, message: '请输入客户姓名', trigger: 'blur'}
                ],
                kehuAddress: [
                    {required: true, message: '请输入客户地址', trigger: 'blur'}
                ],
                kehuPhone: [
                    {required: true, message: '请输入客户电话',trigger: 'blur'},
                    { type: 'number', message: '请输入正确的电话号码', trigger: 'blur',transform:(value) => Number(value)}],
                kehuEmail: [
                    { required: true, message: '请输入客户邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
                ],
            },
        },
        mounted(){
            this.search();
        },
        methods:{
            search(){
                axios.get(`${ctx}/jibenxinxi/kehu/search/${this.pageNo}/${this.pageSize}`,{params:this.kehuVo})
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
           /* toUpdate(row){
                Object.assign(this.kehu,row);
                this.updateFlag=true;
            },
            update(){
               /* let params=Qs.stringify(this.kehu,{serializeDate:(date)=> {
                        return  moment(date).format("YYYY-MM-DD HH:mm");
                    }});*/
          /*      axios.post(`${ctx}/jibenxinxi/kehu/update`,this.kehu)
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });
            },*/

        toUpdate(row){
        //    this.kehu=row;
            Object.assign(this.kehu,row);
          /*  if(this.kehu.phone.length>11){
                console.log("请输入11位电话号码")
            }*/
            this.updateFlag=true;
        },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/jibenxinxi/kehu/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                _this.myData.splice(index,1);
                                _this.search();
                            });
                    }
                });
            },
        update(name){
            /* let params=Qs.stringify(this.role,{serializeDate:(date)=>{
                return moment(date).format("YYYY-MM-DD HH:mm:ss")
                 }})*/

         if(this.kehu.kehuPhone.length!=11) {
               return this.$Message.error('修改失败!电话号码必须为11位');
            }
            if(this.kehu.kehuName=="") {
                return this.$Message.error('修改失败!客户姓名不能为空');
            }
            if(this.kehu.kehuAddress=="") {
                return this.$Message.error('修改失败!地址不能为空');
            }
            if(this.kehu.kehuEmail=="") {
                return this.$Message.error('修改失败!邮箱不能为空');
            }
            if(!/(\S)+[@]{1}(\S)+[.]{1}(\w)+/.test(this.kehu.kehuEmail)) {
                return this.$Message.error('修改失败!邮箱格式错误');
            }
            axios.post(`${ctx}/jibenxinxi/kehu/update`,this.kehu)
                .then(({data})=>{
                    this.updateFlag=false;
                    iview.Message.success({content:data.msg});
                    this.search();
            })
        },
        toAdd(){
            this.kehu={}
            this.addFlag=true;

        },
        add(name){
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.kehu.kehuPhone.length!=11){
                        return this.$Message.error('添加失败!电话号码必须为11位');
                    }
                    axios.post(`${ctx}/jibenxinxi/kehu/add`,this.kehu)
                        .then(({data})=>{
                            this.addFlag=false;
                            iview.Message.success({content:data.msg});
                            this.$refs[name].resetFields();
                            this.search();
                        });
                }else {
                    this.$Message.error('添加失败!');
                }
            })

        },
            cancleSubmit(name){
                this.$refs[name].resetFields();
                this.addFlag=false;
    }
    }


    })
</script>
</body>
</html>
